<template>
  
  <!-- 上面的文字 -->
    <div class="bigbox">购物车</div>

    <!-- 未登录的状态 -->
    <div v-if="channel.setIsLogin===false">
      <van-button plain type="primary" class="but" @click="login">登录后查看数据</van-button>
    </div>

   <div v-if="channel.setIsLogin===true">
    <div class="car" v-for="item in channel.cardata" :key="item.id" >
      <img src="https://img.shetu66.com/2023/07/06/1688611155457376.png" class="img" alt="展示失效">
      <div class="wz1">{{ item.name }}</div>
      <van-stepper v-model="item.count" disable-input class="stepper" @click="channel.totalPrice();" />
      <div class="wz2">￥{{ item.price }}</div>
      <van-checkbox v-model="item.mark" class="check" @click="channel.totalPrice();"></van-checkbox>
      <van-button type="danger" class="btu" @click="channel.deleteGoods(item.id)">删除</van-button>
    </div>
<van-submit-bar style="margin-bottom: 49px;" :price="channel.total*100" button-text="提交订单" @submit="onSubmit" />
</div>


<div style="width: 100%;height:1200px;"></div>
        <!-- tabbar -->
        <van-tabbar v-model="active" style="z-index: 1;">
  <van-tabbar-item icon="home-o" :to="{path:'/'}">主页</van-tabbar-item>
  <van-tabbar-item icon="search" :to="{path:'/classify/classify1'}">分类</van-tabbar-item>
  <van-tabbar-item icon="browsing-history-o" :to="{path:'/life'}">数据</van-tabbar-item>
  <van-tabbar-item icon="comment-o" :to="{path:'/message'}">消息</van-tabbar-item>
  <van-tabbar-item icon="setting-o" :to="{path:'/car'}">购物车</van-tabbar-item>
  <van-tabbar-item icon="friends-o" :to="{path:'/mine'}">我的</van-tabbar-item>
</van-tabbar>
  </template>
  
  
  <script setup>
  import router from '@/router';
import { useCounterStore } from '../../stores/counter'
  import { showConfirmDialog } from 'vant';
  import { showDialog } from 'vant';
  import { onMounted } from 'vue';
  //pinia数据
  const channel = useCounterStore()
  import { ref } from 'vue';
    const active = ref(4)


onMounted(() => {
  window.scrollTo(0,0)
})

  //提交后的数据
  const onSubmit = () => {
    if (channel.total == 0) {
      alert('请选择商品')
    } else {
      showConfirmDialog({
     title: '购买提示',
      message:`您确定要花费${channel.total}元去购买勾选的所有商品吗？`,
})
  .then(() => {
        channel.totalPrice();
        channel.cardata.forEach(item => {
          item.mark = false;
          item.count = 1;
        });
        if (channel.loginid == 100) {
          alert('请先登录')
          router.push('/mine')
        } else {
        channel.userdata[channel.loginid].buy = channel.userdata[channel.loginid].buy + 1;
        channel.userdata[channel.loginid].consume = channel.userdata[channel.loginid].consume + channel.total;
        channel.userdata[channel.loginid].balance = channel.userdata[channel.loginid].balance - channel.total;
        showDialog({
             message: '购买成功！',
                   }).then(() => {
                    // on close
                });
        channel.total = 0
        }
      }
  )
  .catch(() => {
    // on cancel
  });
   
    }
  }

   
  </script>
  
  <style scoped>
/* 统一字体 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* 标题栏美化 */
.bigbox {
    width: 100%;
    height: 60px;
    background: linear-gradient(135deg, #8BC34A 0%, #4CAF50 100%);
    color: white;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 未登录状态 */
.but {
    width: 70%;
    height: 48px;
    border-radius: 24px !important;
    margin: 40% auto 0 !important;
    display: block;
    font-size: 16px;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.but:active {
    transform: scale(0.98);
}

/* 商品卡片 */
.car {
    width: 86%;
    height: 140px;
    margin: 10px 3%;
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s;
}

.car:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 商品图片 */
.img {
    width: 120px !important;
    height: 120px !important;
    object-fit: contain;
    border-radius: 8px;
    margin-right: 15px;
    background: #f8f8f8;
    padding: 5px;
}

/* 商品信息 */
.wz1 {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 60%;
    margin-bottom: 8px;
}

.wz2 {
    color: #e4393c !important;
    font-size: 18px !important;
    font-weight: 700;
    position: absolute;
    bottom: 15px;
    left: 150px;
}

/* 操作区域 */
.btu {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 70px !important;
    height: 30px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
}

.check {
    position: absolute;
    right: 15px;
    top: 15px;
}

:deep(.van-checkbox__icon--checked .van-checkbox__icon) {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

/* 数量选择器 */
.stepper {
    position: absolute;
    left: 150px;
    bottom: 50px;
}

:deep(.van-stepper__plus),
:deep(.van-stepper__minus) {
    background-color: #f8f8f8;
    border-radius: 50%;
}

/* 提交栏 */
:deep(.van-submit-bar) {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(5px);
}

:deep(.van-submit-bar__button) {
    background: linear-gradient(135deg, #FF5722 0%, #F44336 100%) !important;
    border-radius: 25px !important;
    height: 45px !important;
}
</style>